<template>
  <div v-loading="loading">
    <a-form-model ref="shareForm" :rules="rules" :model="shareInfo" :labelCol="{ span: 4 }" :wrapperCol="{ span: 18 }">
      <a-form-model-item label="是否开启">
        <a-radio-group v-model="shareInfo.level">
          <a-radio :value="0"> 关闭 </a-radio>
          <a-radio :value="1"> 一级分销 </a-radio>
          <a-radio :value="2"> 二级分销 </a-radio>
          <a-radio :value="3"> 三级分销 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="自购返利">
        <a-radio-group v-model="shareInfo.is_rebate">
          <a-radio :value="0"> 关闭 </a-radio>
          <a-radio :value="1"> 开启 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="佣金类型">
        <a-radio-group v-model="shareInfo.price_type">
          <a-radio :value="0"> 百分比 </a-radio>
          <a-radio :value="1"> 固定金额 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="一级佣金" prop="level_one">
        <a-input type="number" min="0" :addon-after="addonAfter" v-model="shareInfo.level_one" />
      </a-form-model-item>
      <a-form-model-item label="二级佣金" prop="level_two">
        <a-input type="number" min="0" :addon-after="addonAfter" v-model="shareInfo.level_two" />
      </a-form-model-item>
      <a-form-model-item label="三级佣金" prop="level_three">
        <a-input type="number" min="0" :addon-after="addonAfter" v-model="shareInfo.level_three" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 12, offset: 4 }">
        <a-button :loading="btnLoading" type="primary" @click="submitForm"> 保存 </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { getShareParams, setShareParams } from '@/api/store'

export default {
  name: 'SaasSettingShare',
  data() {
    return {
      loading: false,
      btnLoading: false,
      shareInfo: {
        level: 0, // 是否开启分销
        is_rebate: 0, // 是否开启自购返利
        price_type: 0, // 佣金类型，0百分比，1固定金额
        level_one: 0, // 一级佣金
        level_two: 0, // 二级佣金
        level_three: 0, // 三级佣金
      },
      rules: {
        level_one: [{ required: true, message: '请输入一级佣金', trigger: 'blur' }],
        level_two: [{ required: true, message: '请输入二级佣金', trigger: 'blur' }],
        level_three: [{ required: true, message: '请输入三级佣金', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.getData()
    console.log('share')
  },
  computed: {
    addonAfter: function () {
      return this.shareInfo.price_type == 0 ? '%' : '元'
    },
  },
  props: {
    storeId: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    getData: function () {
      this.loading = true
      getShareParams({ storeId: this.storeId })
        .then((res) => {
          if (res.code == 0) {
            this.shareInfo = res.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },
    submitForm: function () {
      this.$refs.shareForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          setShareParams({
            ...this.shareInfo,
            storeId: this.storeId,
          })
            .then((res) => {
              if (res.code == 0) {
                this.$message.success('保存成功！')
              } else {
                this.$message.warning(res.msg ? res.msg : '保存失败！')
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.btnLoading = false
            })
        }
      })
    },
  },
}
</script>

<style scoped>
</style>
